<template>
    <div>
        <div class="header">
            <div class="header_title">{{ work.title }}</div>
        </div>
        <div class="top">
            <ul class="top_l">
                <li class="frist">截至：{{ work.endTime }}</li>
                <li>
                    <span>
                        {{ work.type === 1 ? '个人作业' : '小组作业' }}</span>
                </li>
            </ul>
            <div class="top_r">
                <el-switch v-model="scoreVisible" @click="scoreVisible = !scoreVisible" @change="isShowScore(scoreVisible)">
                </el-switch>
                <span v-if="scoreVisible">对学生显示成绩</span>
                <span v-else>对学生隐藏成绩</span>
            </div>
        </div>
        <div class="xian"></div>
        <div class="flex main">
            <div class="title_list">
                <el-button round size="small" @click="status = null; selectList();">全部({{ this.allTotal }})</el-button>
                <el-button round size="small" @click="status = 1; selectList();">未批({{ this.noCheckTotal }})</el-button>
                <el-button round size="small" @click="status = 2; selectList();">已批({{ this.checkTotal }})</el-button>
                <el-button round size="small" @click="status = 0; selectList();">未交({{ this.noSubmitTotal }})</el-button>
            </div>
            <div class="search_box">
                <el-input placeholder="学生姓名搜索" prefix-icon="el-icon-search" v-model="searchName" @input="selectList()">
                </el-input>
            </div>
        </div>

        <div class="xian"></div>
        <div class="flex main">
            <div class="List-box">
                <el-dropdown>
                    <el-button
                        class="el-button list-box-btn el-button--primary el-button--medium is-plain el-dropdown-selfdefine ">
                        批量给分
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>统一给分</el-dropdown-item>
                        <el-dropdown-item>区间给分</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-button
                    class="el-button list-box-btn el-button--primary el-button--medium is-plain el-dropdown-selfdefine "
                    @click="returnWork()">
                    打回作业
                </el-button>

                <el-dropdown>
                    <el-button
                        class="el-button list-box-btn el-button--primary el-button--medium is-plain el-dropdown-selfdefine ">
                        下载
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <div @click="downloadAll()">下载选中作业文档</div>
                        </el-dropdown-item>
                        <el-dropdown-item>下载全部作业文档</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-button
                    class="el-button list-box-btn el-button--primary el-button--medium is-plain el-dropdown-selfdefine "
                    v-if="1">
                    变更为已交
                </el-button>
            </div>
            <div class="urgeAll">
                <el-button size="small" @click="urgeAll()">一键催交</el-button>
            </div>
        </div>
        <el-table ref="multipleTable" :data="workList" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column prop="username" label="姓名" sortable>
            </el-table-column>
            <el-table-column prop="sno" label="学号" sortable>
            </el-table-column>
            <el-table-column prop="groupName" label="所属标签" sortable>
            </el-table-column>
            <el-table-column prop="submitTime" label="提交时间" sortable>
            </el-table-column>
            <el-table-column label="成绩" sortable>
                <template slot-scope="scope">
                    <p v-if="scope.row.status === 0" @click="updateStudentWork(scope.row)"
                        style="cursor: pointer; color: red;">未交</p>
                    <div v-else>
                        <p v-if="scope.row.score == -1">已交</p>
                        <p v-else>{{ scope.row.score === null ? '未批' : scope.row.score }}</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <div style="color: #4d90fe;cursor: pointer;" v-if="scope.row.status === 1 || scope.row.status == 2">
                        <span @click="preview(scope.row.filename)" style="margin: 0 5px;">查看</span>|
                        <span @click="check(scope.row)">打分</span>
                    </div>
                    <p @click="urge(scope.row.id)" style="color: #4d90fe;cursor: pointer;"
                        v-if="scope.row.status === 0 || scope.row.status == 3">催交</p>
                    <!-- <p @click="preview(scope.row.filename)" style="color: #4d90fe;cursor: pointer;"
                        v-if="scope.row.status === 1"> 进入批阅</p>
                    <div v-else>
                        <p @click="preview(scope.row.filename)" style="color: #4d90fe;cursor: pointer;"
                            v-if="scope.row.status === 0">打分</p>
                        <p @click="urge(scope.row.studentId)" style="color: #4d90fe;cursor: pointer;" v-else>催交</p>
                    </div> -->
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination">
            <!-- 分页组件 size-change:每页最大变化 current-change:当前最大变化 layout:功能组件 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="PageInfo.page" :page-sizes="[1, 2, 5, 100]" :page-size="PageInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <el-dialog :visible.sync="imgVisble" width="50%" class="imgVisble" :close-on-click-modal="false">
            <iframe :src=imgVisbleURL frameborder="0" width="100%" height="600">
            </iframe>
        </el-dialog>
        <!-- 查看作业 -->
        <el-dialog :visible.sync="checkWorkFormVisiable" @close="checkWorkFormVisiableClose" title="学生作业">
            <el-form label-position="left" label-width="80px" :model="checkForm1">
                <el-form-item label="学生姓名">
                    <el-input disabled v-model="checkForm1.username" placeholder="无数据"></el-input>
                </el-form-item>
                <el-form-item label="学号">
                    <el-input disabled v-model="checkForm1.sno" placeholder="无数据"></el-input>
                </el-form-item>
                <el-form-item label="所属标签">
                    <el-input disabled v-model="checkForm1.groupName" placeholder="无数据"></el-input>
                </el-form-item>
                <el-form-item label="提交时间">
                    <el-input disabled v-model="checkForm1.endTime" placeholder="无数据"></el-input>
                </el-form-item>
                <el-form-item label="作业内容">
                    <el-input disabled v-model="checkForm1.content" placeholder="无数据"></el-input>
                </el-form-item>
                <el-form-item label="下载作业">
                    <el-button @click="download(checkForm1.filename)">下载作业</el-button>
                </el-form-item>
                <el-form-item label="成绩">
                    <el-input placeholder="暂无成绩" v-model="checkForm1.score"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="checkWorkFormVisiableClose">取 消</el-button>
                <el-button type="primary" @click="enterSorce">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getFormData } from "@/utils/getFormData.js";
import { deleteEmptyOption } from "@/utils/deleteEmptyOption";
import {getRequest, postRequest} from "@/utils/api";

export default {
    name: "ReadPage",
    components: {
    },
    data() {
        return {
            // 保存作业成绩
            score2: '',
            // 查看作业
            checkWorkFormVisiable: false,
            // 批阅作业
            editWorkFormVisiable: false,
            checkForm1: {},
            editForm: {},
            imgVisble: false,
            // 查询信息实体
            PageInfo: {
                // 查询信息
                status: null,
                name: '',
                // 查询信息
                workId: 0,
                // 当前页
                page: 1,
                // 每页最大数
                pageSize: 5,
            },
            // 作业列表
            workList: [],
            // 查询条件记录数
            total: 0,
            // 总记录数
            allTotal: 0,
            // 未批改数
            noCheckTotal: 0,
            // 已批改数
            checkTotal: 0,
            // 未提交数
            noSubmitTotal: 0,
            // 分数是否可见
            scoreVisible: false,
            searchName: '',
            status: null,
            drawer: false,
            work: {},
            multipleSelection: [],
            imgVisbleURL: '',
            checkForm: {
                score: null
            },
            checkFormRules: {
                score: [
                    { required: true, message: '请输入分数', trigger: 'blur' }
                ]
            },
        }
    },
    methods: {
        checkWorkFormVisiableClose() {
            this.checkForm1.score = this.score2
            this.checkWorkFormVisiable = false
        },
        // 修改分数
        enterSorce() {
            this.checkForm1.status = 2
            postRequest('/stuWork/update', getFormData(deleteEmptyOption(this.checkForm1))).then(res => {
                if (res) {
                    this.checkForm1.score = ''
                    this.checkWorkFormVisiable = false
                    this.selectList();
                }
            })
        },
        // 查看作业
        check(stu) {
            this.score2 = stu.score
            this.checkForm1 = stu
            this.checkWorkFormVisiable = true
        },
        // 催交未交同学
        urge(id) {
            // 发通知
            this.$confirm('', '是否要进行催交？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                getRequest(`/stuWork/expedite/${id}`).then(res => {
                  console.log(res);
                })
            }).catch(() => {
            });
        },
        urgeAll() {
            // 发通知
            this.$confirm('', '是否要催交全部未交学生的作业？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                postRequest("/stuWork/expediteBatch").then(res => {
                  console.log(res);
                })
            }).catch(() => {
            });
        },
        selectList() {
            this.PageInfo.status = this.status;
            this.PageInfo.name = this.searchName;
            this.PageInfo.workId = 1;//this.$store.getters.workId;
            postRequest("/stuWork/selectList", this.PageInfo).then(res => {
              console.log("批阅：",res.data.data.list)
                if (res) {
                    // 作业列表数据
                    this.workList = res.data.data.list;
                    // 查询条件下作业数
                    this.total = res.data.data.total;
                    // 总作业数
                    this.allTotal = res.data.data.allTotal;
                    // 未批改数
                    this.noCheckTotal = res.data.data.noCheckTotal;
                    // 已批改数
                    this.checkTotal = res.data.data.checkTotal;
                    // 未提交数
                    this.noSubmitTotal = res.data.data.noSubmitTotal;
                }
            })
        },
        // 获取作业信息
        getWork() {
            const id = 1;//this.$store.getters.workId;
            getRequest(`/work/selectById/${id}`).then(res => {
              console.log("获取作业信息：",res.data.data);
                if (res) {
                    this.work = res.data.data;
                }
            })
        },
        // 跳转页面
        toNav(nav) {
            this.$router.push(nav)
        },
        updateStudentWork(student) {
            const content = student.username + "“未提交”电子档作业，是否将其变更为“已提交”？";
            this.$confirm('', content, {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                student = deleteEmptyOption(student);
                student.score = -1;
                student.status = 2;
                postRequest("/stuWork/update", getFormData(student)).then(res => {
                    if (res) {
                        this.init();
                    }
                })
            }).catch(() => {
            });
        },
        // 最大数
        handleSizeChange(newSize) {
            this.PageInfo.pageSize = newSize;
            this.selectList();
        },
        // page的触发动作
        handleCurrentChange(newPage) {
            this.PageInfo.page = newPage;
            this.selectList();
        },
        // 是否展示成绩
        isShowScore(scoreVisible) {
            if (scoreVisible) this.$message("已对学生显示成绩");
            else this.$message("已对学生隐藏成绩");
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 打回作业
        returnWork() {
            if (this.multipleSelection.length > 0) {
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    if (this.multipleSelection[i].filename != null)
                        this.updateWork(this.multipleSelection[i]);
                }
            } else {
                // 没有选择返回提示
                this.$message.info("未选中已提交作业")
            }
        },
        // 修改作业
        updateWork(stuWork) {
            stuWork = deleteEmptyOption(stuWork);
            stuWork.status = 0;
            stuWork.submitTime = this.getCurrentTime();
            postRequest('/stuWork/update', getFormData(stuWork)).then(res => {
                if (res) {
                    this.init();
                }
            })
        },
        // 获取当前时间
        getCurrentTime() {
            return this.$moment().format("YYYY-MM-DD HH:mm:ss");
        },
        // 下载选中的作业
        downloadAll() {
            if (this.multipleSelection.length > 0) {
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    if (this.multipleSelection[i].filename != null)
                        window.open(this.multipleSelection[i].filename);
                }
            } else {
                // 没有选择返回提示
                this.$message.info("未选中可下载文件的作业")
            }
        },
        // 下载作业
        download(file) {
            window.open(file);
        },
        // 预览
        preview(row) {
            this.imgVisbleURL = `https://view.xdocin.com/view?src=${row}`;
            this.imgVisble = true
        },
        init() {
            this.selectList();
            this.getWork();
        }
    },
    created() {
        this.init();
    }
}
</script>

<style scoped lang="less">
.header {
    display: flex;
    justify-content: space-between;

    .header_title {
        font-size: 20px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #3c4043;
    }
}

.top {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    margin-bottom: 15px;

    .top_l {
        display: flex;
        flex-direction: row;
        padding: 0;

        .frist {
            background: #e8f0ff;
            color: #1967d2;
        }

        li {
            display: inline-block;
            border-radius: 4px;
            background: #eee;
            text-align: left;
            color: #5f6368;
            padding: 5px 2px;
            margin-right: 10px;
            line-height: 10px;
            padding-left: 8px;
            padding-right: 8px;
        }
    }

    .top_r {
        display: block;
        flex-direction: row;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #4285f4;
        line-height: 8px;
    }
}

.xian {
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #e7ebf0;
}

.main {
    padding: 24px 0;

    .title_list {
        .el-button {
            width: 100px;
        }
    }

    .urgeAll {
        .el-button {
            color: #fff;
            background-color: #4285f4;
            border-color: #4285f4;
        }

        .el-button:hover {
            background: #689df6;
            border-color: #689df6;
            color: #fff;
        }
    }
}

.cmps-homework-review .List-box .list-box-btn {
    display: inline-block;
    color: #4285f4;
    width: 104px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    margin-left: 24px;
    padding: 0;
    background: #fff;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pagination {
    text-align: center;
    margin: 24px 0;
}
</style>
